<template>
	<view class="searchBox">
		<view class="box">
			<view class="list dis-flex flex-x-between flex-y-center" v-for="item in list" :key="item.id">
				<image :src="IMG_URL + item.user.avatar" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">
						<view class="who">{{item.user.username}}</view>
						<view class="time">Ta {{item.createtime | handleData}}关注了你</view>
					</view>
					<view class="talk" @click.stop="onCollection(item)">
						<text v-if="item.other == 0">回关</text>
						<text v-else-if="item.other == 1">取关</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		readNum,
		getAddFollow,
		collectionUser,
		cancelCollection
	} from "../../api/im.js";
	import st from "../../utlis/showtoast.js";
	import {
		IMG_URL,
	} from "../../config/app.js";
	
	export default {
		name: 'addFollow', // 新增关注
		data() {
			return {
				IMG_URL: IMG_URL,
				page: 1,
				total: 0,
				list: []
			}
		},
		/**
		 * 刷新
		 */
		onPullDownRefresh() {
			this.onRefresh()
		},
		onReachBottom() {
			this.onLoadMore()
		},
		onLoad() {
			this.changeReadNumData()
			this.getData()
		},
		methods: {
			/**
			 * 关注 取消关注
			 */
			async onCollection(item) {
				if (parseInt(item.other) == 1) {
					//取消关注
					let res = await cancelCollection(item.user_id)
					st.success(res.msg, () => {
						this.onRefresh()
					})
				} else {
					//关注
					let res = await collectionUser(item.user_id)
					st.success(res.msg, () => {
						this.onRefresh()
					})
				}
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = []
				this.getData()
			},
			/**
			 * 加载更多
			 */
			onLoadMore() {
				if (this.list.length < this.total) {
					this.page++;
					this.getData()
				}
			},
			/**
			 * 网络请求
			 */
			async getData() {
				let res = await getAddFollow(this.page)
				this.total = parseInt(res.data.total)
				if (this.page == 1) {
					this.list = res.data.data
				} else {
					this.list = [...this.list, ...res.data.data]
				}
			},
			/**
			 * 未读变已读
			 */
			async changeReadNumData() {
				await readNum("new_read")
			}
		},
		filters: {
			// 时间
			handleData(time) {
				let date = parseInt(new Date().getTime() / 1000) - parseInt(time)
				let second = parseInt(date % 60);
				let min = parseInt(parseInt(date / 60) % 60);
				let hour = parseInt(parseInt(date / 3600) % 24);
				let day = parseInt(parseInt(date / 3600 / 24) % 30);
				
				let dateObj = new Date(parseInt(time) * 1000);
				let year = dateObj.getFullYear();
				let month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
				let day2 = dateObj.getDate().toString().padStart(2, '0');
				let hour2 = dateObj.getHours().toString().padStart(2, "0");
				let min2 = dateObj.getMinutes().toString().padStart(2, "0");
				
				if (date < 60) {
					return second + "秒前"
				} else if (date < 3600) {
					return min + "分前"
				} else if (date < 24 * 3600) {
					return hour + "小时前"
				} else if (date < 2 * 24 * 3600) {
					return "昨天" + hour2 + ":" + min2
				} else {
					return year + "年" + month + "月" + day2 + "日" + " " + hour2 + ":" + min2
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		width: 100%;

		.box {
			padding: 0 30rpx;

			.list {
				padding: 40rpx 0;
				border-bottom: 1px solid #EEE;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 50%;
					margin: 0 16rpx 0 0;
				}

				.name {
					.who {
						font-weight: bold;
						font-size: 32rpx;
						color: $uni-text-color;
					}

					.time {
						font-size: 24rpx;
						color: $uni-text-color-placeholder;
						margin-top: 20rpx;
					}
				}

				.talk {
					width: 125rpx;
					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 26rpx;
					border: 1px solid $uni-text-color-primary;
					font-size: 24rpx;
					color: $uni-text-color-primary;
				}
			}
		}
	}
</style>